<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface TodoItem {
    id: number,
    name?: string
}
let index = 1;
const todoName = ref<string>('')
const todoList = ref<TodoItem[]>([])
const add = () => {
    index += 1
    todoList.value.push({
        id: index,
        name: todoName.value
    })
    todoName.value = ''
}
const jumpFn = (record: TodoItem) => {
    console.log('record==', record)
    router.push({ name: 'TodoDetail', query: { id: record.id } })
    // router.push({ path: `/todo/${record.id}` })
}

</script>
<template>
 <div>
    <input type="text" v-model="todoName">
    <button @click="add">添加一条TODO</button>
    <div class="todo-list-box">
        <div class="todo-item" v-for="item in todoList" :key="item.id" @click="jumpFn(item)">{{ item.name }}</div>
    </div>
 </div>
</template>
<style scoped>
.todo-list-box {
    margin-top: 30px;
    padding:30px 20px;
    border: 1px solid #eeefff;
    text-align: left;
}
.todo-item {
    text-decoration: underline;
    margin-bottom: 10px;
}
</style>
